<template>
  <div class="detail">
    <div class="details">
      <div class="tope">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="http://localhost:4000/gou.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://localhost:4000/gou.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://localhost:4000/gou.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="http://localhost:4000/gou.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
        <span class="hhh" @click="$router.go(-1)">&lt;</span>
      </div>

      <div class="price">
        <dl>
          <dt>
            <b>限时秒杀</b> <b class="pl">￥{{ detail.price }}</b>
          </dt>
          <dd></dd>
        </dl>
        <div class="h">
          <p class="l">
            <span>距离活动开始仅剩余</span>
            <van-count-down
              :time="time"
              format="DD 天 HH 时 mm 分 ss 秒"
              class="time"
            />
          </p>
        </div>
      </div>
      <div class="title">
        <b>{{ detail.desc }}</b>
      </div>
    </div>
    <div class="talk">
      <!--  <p>
        <router-link to="/detail/xq">商品详情</router-link>
        <router-link to="/detail/pj">商品评价</router-link>
      </p> -->
      <div class="content">
        <van-tabs v-model="active">
          <van-tab title="商品详情" class="left">
            <dl v-for="item in detaillist" :key="item.id">
              <dt>
                <img src="@/img/1.png" alt="" />
              </dt>
              <dd>
                <p>{{ item.title }}</p>
                <p>￥{{ item.price }}</p>
                <p><button @click="addcar(item.id)">加入购物车</button></p>
              </dd>
            </dl>
          </van-tab>
          <van-tab title="商品评价" class="pjn">
            <dl v-for="item in list" :key="item.id">
              <dd>
                <p class="pp">
                  <b>Lv{{ item.num }}</b>
                  <img src="@/img/1.png" alt="" class="yuan" />
                  <span class="name">{{ item.name }}</span>

                  <span class="desc">{{ item.title }}</span>
                </p>
              </dd>
              <dt>
                <img src="@/img/1.png" alt="" />
                <img src="@/img/1.png" alt="" />
              </dt>
            </dl>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      active: 2,
    };
  },
  created() {
    console.log(this.$store, "store2");
    this.$store.dispatch("set_pjlist");
    this.$store.dispatch("set_detaillist");
  },
  methods: {
    addcar(id) {
      this.$store.commit("addcar", id);
    },
    onClickButton() {
      this.$router.push("/cart");
    },
  },

  computed: {
    detail() {
      return this.$store.getters.getDetail(this.$route.params.id);
    },
    list() {
      return this.$store.state.pjlist;
    },
    detaillist() {
      return this.$store.state.detaillist;
    },
  },
};
</script>

<style lang="scss">
@import "@css/style.scss";

.details {
  position: relative;
  width: 100%;
  height: auto;
  background: #f0f0f0;
  .tope {
    width: 100%;
    height: px2rem(330);

    .hhh {
      position: absolute;
      top: 0;
      color: #fff;
      font-size: $titleSize;
    }
    img {
      width: 100%;
      height: px2rem(380);
    }
  }
}
.top {
  /*   opacity: 0; */

  background-color: rgba(0, 0, 0, 0);
  width: 100%;

  position: sticky;
  top: 0;
  left: 0;
  border: none;
  z-index: 10;
  font-size: px2rem(17);
  line-height: 48px;
  display: flex;

  b {
    margin-left: 150px;
  }
}
.price {
  width: 100%;
  height: px2rem(50);
  background: linear-gradient(to right, #f62c2c, #f86329);
  font-size: px2rem(16);
  color: #fff;
  display: flex;
  b {
    font-size: px2rem(14);
  }
  .pl {
    text-decoration: line-through;
  }
  margin-top: px2rem(50);
  .time {
    color: #ffff37;
    display: inline-block;
    width: px2rem(130);
    font-size: px2rem(11);
    line-height: px2rem(30);
  }
  dl {
    margin-left: px2rem(30);
    margin-top: px2rem(5);
    dd {
      b {
        text-decoration: line-through;
      }
    }
  }
}
* {
  margin: 0;
  padding: 0;
}
.l {
  margin-left: px2rem(140);
  margin-top: px2rem(10);
  span {
    font-size: px2rem(12);
  }
}
.title {
  font-size: px2rem(18);
  text-align: center;
  margin-left: px2rem(18);
  width: 90%;
  height: px2rem(70);
  color: rgb(83, 76, 76);
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本溢出时显示省略标记*/
  display: -webkit-box; /*设置弹性盒模型*/
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; /*子代元素垂直显示*/
  b {
    font-size: 10px;
  }
}
.content {
  font-size: px2rem(15);
  background: #f0f0f0;
  .left {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 px2rem(15);
    dl {
      width: 49%;
      margin: px2rem(10) 0;
      dt {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    button {
      border: none;
      background: red;
      border-radius: 10px;
      width: px2rem(70);
      font-size: px2rem(10);
      color: #fff;
    }
  }
}
.pjn {
  width: 100%;
  height: auto;

  dl {
    width: 100%;
    position: relative;
    b {
      position: absolute;
      top: px2rem(50);
      left: px2rem(70);
      display: inline-block;
      width: px2rem(45);
      text-align: center;
      height: px2rem(15);
      background: linear-gradient(to right, #f62c2c, #f86329);
      border-radius: px2rem(8);
      line-height: px2rem(16);
      font-size: px2rem(12);
      color: #fff;
    }
    dd {
      width: 100%;
      height: px2rem(50);
    }
  }
  .yuan {
    border-radius: px2rem(40);
  }
  .pp {
    width: 100%;
    height: px2rem(50);
    display: flex;
  }
  .name {
    margin-left: px2rem(15);
    margin-top: px2rem(10);
  }
  dl {
    margin-top: px2rem(10);
    background: #fff;
    border-radius: px2rem(8);
    width: 95%;
    margin-left: px2rem(10);
    padding: px2rem(10);
  }
  dt {
    margin-top: px2rem(20);
    img {
      width: 40%;
      height: px2rem(100);
      margin-left: px2rem(20);
      border-radius: px2rem(8);
    }
  }
  .desc {
    margin-left: px2rem(28);
    margin-top: px2rem(22);
    font-size: px2rem(12);
    color: #bebebe;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
</style>